<template>
  <div>
    <a-calendar
      v-model:value="value"
      :locale="locale"
      valueFormat="YYYY-MM-DD"
      mode="month"
      @panelChange="dateChange"
    >
      <template #dateCellRender="{ current: value }">
        <span>{{ getListData(list, length, value) }}</span>
      </template>
    </a-calendar>
    <div class="position">
      <Model :Type="$route.params.type" @reLoad="reLoadThis" />
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  onUpdated,
  computed,
  ref,
} from "vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import Model from "./Model.vue";
export default defineComponent({
  name: "house",
  setup() {
    const { proxy } = getCurrentInstance();
    const list = ref([]);
    const value = ref();
    const length = ref(0);
    function getList(type) {
      let houseType = false;
      if (type === "electricity") {
        houseType = true;
      } else {
        houseType = false;
      }
      proxy.$api.get("house?type=" + houseType).then((res) => {
        if (res.error === 0) {
          list.value = res.message;
          length.value = res.message.length;
        } else message.error(res.message);
      });
    }
    onMounted(() => {
      getList(proxy.$route.params.type);
    });
    onUpdated(() => {
      getList(proxy.$route.params.type);
    });
    const getListData = computed(() => {
      return function (data, dataLength, value) {
        let listData;
        for (var i = 0; i < dataLength; i++) {
          let ri =
            value.date() < 10 ? "0" + value.date().toString() : value.date().toString();
          if (
            data[i].day.split("-")[2] === ri &&
            value.format("YYYY-MM-DD").split("-")[1] === data[i].day.split("-")[1] &&
            value.format("YYYY-MM-DD").split("-")[0] === data[i].day.split("-")[0]
          ) {
            listData = data[i].type
              ? "电量：" + data[i].count + " (度)"
              : "水量：" + data[i].count + " (m^3)";
          }
        }
        return listData;
      };
    });
    function dateChange(date, mode) {
      console.log(date, mode);
    }
    function reLoadThis() {
      location.reload();
    }
    return { locale, list, value, length, getListData, dateChange, reLoadThis };
  },
  components: { Model },
});
</script>
<style scoped>
.position {
  position: absolute;
  bottom: 30px;
  right: 15px;
}
</style>
